<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 2.1 至少包含以下元素：3个DIV,标题，5个P标签，图片，列表
		2.2 分别实现 id,类，标签三种方式查找以上元素 -->

		<div id="div_id">1个DIV</div>
		<div class="div_class">2个DIV</div>
		<div>3个DIV</div>
		<button id="b_get_div">获取div</button>

		<h1 id="h1_id" class="h1_class">标题</h1>
		<button id="b_get_h1">获取h1</button>

		<p id="p_id">1个P标签</p>
		<p class="p_class">2个P标签</p>
		<p>3个P标签</p>
		<p>4个P标签</p>
		<p>5个P标签</p>
		<button id="b_get_p">获取p</button>
		
		<br>
		
		<img id="img_id" class="img_class" src="./img/pic.jpg" border="1px solid #999" style=" width: 66px; height: 66px; margin:10px 0;" />
		
		<br>
		<button id="b_get_img">获取img</button>
		
		<ul id="ul_id" class="ul_class" >
			<li >列</li>
			<li >表</li>
		</ul>
		<button id="b_get_ul">获取ul</button>

	</body>

	<script>
		function findDiv() {
			console.log("S 获取div")
			console.log(document.getElementById("div_id"));
			console.log(document.getElementsByClassName("div_class"));
			console.log(document.getElementsByTagName("div"));
			console.log("E 获取div")
		}
		document.getElementById("b_get_div").onclick = findDiv;


		function findH1() {
			console.log("S 获取h1")
			console.log(document.getElementById("h1_id"));
			console.log(document.getElementsByClassName("h1_class"));
			console.log(document.getElementsByTagName("h1"));
			console.log("E 获取h1")
		}
		document.getElementById("b_get_h1").onclick = findH1;

		function findP() {
			console.log("S 获取p")
			console.log(document.getElementById("p_id"));
			console.log(document.getElementsByClassName("p_class"));
			console.log(document.getElementsByTagName("p"));
			console.log("E 获取p")
		}
		document.getElementById("b_get_p").onclick = findP;

		function findImg() {
			console.log("S 获取img")
			console.log(document.getElementById("img_id"));
			console.log(document.getElementsByClassName("img_class"));
			console.log(document.getElementsByTagName("img"));
			console.log("E 获取img")
		}
		document.getElementById("b_get_img").onclick = findImg;
		
		function findUl() {
			console.log("S 获取ul")
			console.log(document.getElementById("ul_id"));
			console.log(document.getElementsByClassName("ul_class"));
			console.log(document.getElementsByTagName("ul"));
			console.log("E 获取ul")
		}
		document.getElementById("b_get_ul").onclick = findUl;
	</script>
</html>
